<template>
  <el-row :gutter="40" class="panel-group">
    <div class="contain">
      <el-col :xs="24" :sm="24" :lg="6" class="card-panel-col">
        <div class="contain_letf" style="min-height: 400px">
          <el-table :data="tableData" border stripe>
            <el-table-column prop="phone" :label="$t('dashboard.adminCallOrder.phone')"  align="center"></el-table-column>
            <el-table-column  :label="$t('dashboard.adminCallOrder.callTime')"  align="center">
              <template slot-scope="scope">
                <span style="white-space: nowrap;">{{scope.row.callDate | datetimeFormatter}}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination class="el-pagination" pager-count="3" :current-page="pageNum" :page-size="pageSize" layout="prev, pager, next" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>
      </el-col>
      <el-col :xs="72" :sm="72" :lg="18" class="card-panel-col">
        <div class="contain_right" style="height: 279px; overflow:hidden;overflow-y: scroll;">
          <div class="box-card-wrap"  v-if="shippingEmployeeListData.length > 0">
            <el-card style="margin-right: 10px" class="box-card" v-for="(item,index) in shippingEmployeeListData">
              <div  slot="header" class="clearfix"  @click="toSalesSlip(item)" ><span>{{item.name}}</span></div>
              <div class="text_item_wrap_wrap"  @click="toSalesSlip(item)" >
                <div class="text_item_wrap">
                  <div class="text item">{{$t('dashboard.adminCallOrder.dispatch')}} {{item.orders}}</div>
                  <div class="text item">{{$t('dashboard.adminCallOrder.order')}} {{item.orderQry}}</div>
                  <div class="text item">{{$t('dashboard.adminCallOrder.loading')}} {{item.carQry}}</div>
                </div>
              </div>
            </el-card>
          </div>
          <div class="box-card-wrap" v-if="shippingEmployeeListData.length == 0">
            <noData v-if="shippingEmployeeListData.length == 0" style="height: 100%"></noData>
          </div>
        </div>
      </el-col>
    </div>
  </el-row>
</template>
<script>
import { list as phonelist } from '@/api/callRecord'
// import { shippingEmployeeList } from '@/api/shipping'
import { EventBus } from '@/api/eventBus'
// import noData from "@/views/designer/components/product/components/noData";
export default {
  data() {
    return {
      tableData:[],
      pageSize: 6,
      pageNum: 1,
      total: 0,
      shippingEmployeeListData:[]
    };
  },
  components:{
    // noData
  },
  created() {
    EventBus.$on('phonesave-add', res => { // 监听新增完毕
      this.pageNum = 1
      this.phonedoing()
      this.shippingEmployeeList()
    });
    this.phonedoing()
    this.shippingEmployeeList()
  },
  methods:{
    toSalesSlip(item){
      this.$router.push({
        path: "/order/list",
        query: { shippingEmployeeItem: JSON.stringify(item)
        },
      })
    },
    shippingEmployeeList(){
      let params = {
        pageSize:this.pageSize,
        pageNum:this.pageNum
      }
      shippingEmployeeList(params).then(res=>{
        res.data.forEach(item =>{
          if(item.name == null){
            item.name = "未命名"
          }
        })
        this.shippingEmployeeListData = res.data
      })
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.phonedoing()
    },
    handleCurrentChange(value) {
      this.pageNum = value
      this.phonedoing()
    },
    phonedoing(){
      let params ={
        pageSize:this.pageSize,
        pageNum:this.pageNum
      }
      phonelist(params).then(res=>{
        this.tableData=res.data.data
        this.total=res.data.total
      })
    },
  }
}
</script>
<style scoped>
.contain_letf{
  background-color: white;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 370px;
}
.contain_right{
  min-height: 400px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: white;
}
.box-card-wrap{
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #dfe6ec;
  justify-content: flex-start;
  min-height: 320px;
  padding: 10px;
}

.contain{
  display: flex;
  justify-content: space-between;
}
@media screen and (min-width: 0px) and (max-width: 1200px) {
  .contain{
    flex-direction: column;
  }
  .contain_right{
    margin-top: 40px;
  }
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 5px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  /*width: 132px;*/
  width: 129px;
  height: 120px;
  margin-bottom: 10px;
}
.el-pagination{
  padding-top: 10px;
  padding-bottom: 10px;
}
.text_item_wrap_wrap{
  display: flex;
  justify-content: space-between;
}
.contain_right >>> .el-card__body{
  padding: 10px 20px;
}
.box-card-wrap >>> .el-card__header{
  padding: 10px 20px;
}
</style>

